@extends('layouts.admin')
@push('morecss')
    <!-- orris -->
    <link href="{{ asset('/vendor/AdminInspinia/css/plugins/morris/morris-0.4.3.min.css') }}" rel="stylesheet">

    <link href="{{ asset('/vendor/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css') }}" rel="stylesheet">
    <style>
        .hand{
            cursor:pointer;
        }
    </style>
@endpush

@push('morescript')
    <!-- ChartJS-->
    <script src="{{ asset('/vendor/AdminInspinia/js/plugins/chartJs/Chart.min.js') }}"></script>
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxmasscomment.index')
            url_article_list: '{{ route('admin.wxmasscomment.index') }}',
            @endcan
            @can('admin.wxtjarticle.summary')
            url_list: '{{ route('admin.wxtjarticle.summary') }}',
            @endcan
            data_start_date:'{{ $startDate }}',
            data_end_date:'{{ $endDate }}',
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxtjarticle_summary.js') }}"></script>
@endpush
@section('content')
    <div class="fh-breadcrumb">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label class="control-label" for="keyword">关键字</label>
                        <input type="text" id="keyword" name="keyword" v-model="articleSearchParams.keyword" placeholder="请输入搜索关键字"
                               class="form-control">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" v-on:click="queryArticle"><i class="fa fa-search"></i>
                                搜索图文
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fh-column">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                    <ul class="list-group elements-list">
                        <li class="list-group-item hand" v-for="(article, index) in article_list" v-on:click="setCurArticle(index)" v-bind:class="[article.id == cur_article.id ? 'active' : '']">
                            <small class="pull-right text-muted">@{{ article.mass.push_time }}</small>
                            <strong>@{{ article.mass.title }}</strong>
                            <div class="small m-t-xs">
                                <p>
                                    文章标题:@{{ article.title }}
                                </p>
                                <p class="m-b-none">
                                </p>
                            </div>
                        </li>
                    </ul>
                    <div class="list-group text-center">
                        <pagination :pagination="articlePagination" :callback="queryArticle" :options="paginationOptions"></pagination>
                    </div>
                </div>
                <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 36.6985px;">

                </div>
                <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">

                </div>
            </div>
        </div>

        <div class="full-height">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div class="full-height-scroll white-bg border-left"
                     style="overflow: hidden; width: auto; height: 100%;">
                    <div class="element-detail-box">

                        <div class="tab-content">
                            <div class="ibox float-e-margins">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <div class="col-sm-6">
                                                    <label class="control-label" for="start_time">开始时间</label>
                                                    <div>
                                                        <vue-datepicker-local
                                                                v-model="chartSearchParams.start_time"
                                                                format="YYYY-MM-DD" clearable
                                                                placeholder="开始时间"></vue-datepicker-local>
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="control-label" for="end_time">结束时间</label>
                                                    <div>
                                                        <vue-datepicker-local
                                                                v-model="chartSearchParams.end_time"
                                                                format="YYYY-MM-DD" clearable
                                                                placeholder="结束时间"></vue-datepicker-local>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="form-group">
                                            <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                                            <div>
                                                <button class="btn btn-primary" type="button" v-on:click="queryChart"><i class="fa fa-search"></i>
                                                    生成表格
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="row">
                                        <div class="tabs-container">
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a data-toggle="tab" href="#tab-1">人数统计</a></li>
                                                <li class=""><a data-toggle="tab" href="#tab-2">次数统计</a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div id="tab-1" class="tab-pane active">
                                                    <div class="panel-body">
                                                        <canvas id="myChart1" height="140"></canvas>
                                                    </div>
                                                </div>
                                                <div id="tab-2" class="tab-pane">
                                                    <div class="panel-body">
                                                        <canvas id="myChart2" height="140"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="slimScrollBar"
                     style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 80px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 45.7604px;"></div>
                <div class="slimScrollRail"
                     style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
            </div>
        </div>


    </div>
@endsection